<template>
<view>
	<view class="list" v-for="(item,index) in list" :key="index">
		<view class="item">姓名: <text class="remark">{{item.name}}</text></view>
		<view class="item">联系电话:<text class="remark">{{item.phone}}</text></view>
		<view class="item">所在城市:<text class="remark">{{item.city}}</text></view>
		<view class="item">具体地址:<text class="remark">{{item.address}}</text></view>
		<view class="payitem">
			<view v-if="item.type == 1" class="checktrue">设为默认</view>
			<view v-else class="checkfalse" @click="checktype(item,index)">设为默认</view>
			<view class="del" @click="del">删除</view>
		</view>
	</view>
	<view class="footer" @click="addAdd">新增收货地址</view>
	<uni-popup ref="popup" type="bottom">
		<view class="payclass">
			<view class="pop_top">
				<view class="po_top_1">新增收货地址</view>
				<image @click="close" src="/static/img/close.png"></image>
			</view>
			<view class="view_input1">
			    <view class="view_input_title2">联系人:</view>
				<input class="view_input_input1" type="text" v-model="form.name"
				placeholder-class="placeholderClass" placeholder="请输入联系人"/>
			</view>
			<view class="view_input1">
			    <view class="view_input_title2">联系电话:</view>
				<input class="view_input_input1" type="number"  v-model="form.phone"
				placeholder-class="placeholderClass" placeholder="联系电话"/>
			</view>
			<view class="view_input1">
			    <view class="view_input_title2">所在城市:</view>
				<pickerAddress class="view_input_input1" @change="cityChange">
					{{form.city ? form.city : '所在城市'}}
				</pickerAddress>
			</view>
			<view class="view_input1">
			    <view class="view_input_title2">具体地址:</view>
				<input class="view_input_input1" type="text" v-model="form.address"
				placeholder-class="placeholderClass" placeholder="具体地址"/>
			</view>
			<view class="view_input1">
			    <view class="view_input_title2">是否默认:</view>
				<radio-group class="view_input_radio1" @change="radioBind">
					<label>
						<radio value="1"/>
						<view>是</view>
					</label>
					<label style="margin-left: 40rpx;">
						<radio value="2"/>
						<view>否</view>
					</label>
				</radio-group>
				<text class="red">*</text>
			</view>
			<button v-if="addTrue" @click="postAdd" class="pboutom">添加</button>
		</view>
	</uni-popup>
</view>
</template>
<script>
import request from '@/util/request.js'
import uniPopup from '@/modules/uni-popup/uni-popup.vue'
import pickerAddress from '@/modules/uni-city/pickerAddress.vue'
export default {
	data() {
		return {
			list:[],
			addTrue:true,
			form:{
				city:'',
				type:''
			}
		}
	},
	components: {uniPopup,pickerAddress},
	onLoad:function(){
		uni.showLoading({  
		    title: '加载中'  
		});
		this.getList()
	},
	methods: {
		getList:function(){
			var that = this;
			var data = {uid:uni.getStorageSync('uid')}
			request({
				url: 'address/list',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					that.list = res.data.data
				}
			})
		},
		checktype:function(item,index){
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1]; //当前页面
			var prevPage = pages[pages.length - 2]; //上一个页面
			var that = this;
			var data = {
				uid:uni.getStorageSync('uid'),
				id:item.id
			}
			request({
				url: 'address/check',
				method: 'post',
				data:data,
				success: (res) => {
					that.list[index].type = 1
					prevPage.$vm.addid = item.id
					prevPage.$vm.address = item
					uni.showToast({
						title:'设置成功!!',
						icon: "none", 
						position:'bottom',
					});
					return;
				}
			})
		},
		addAdd:function(){
			this.$refs.popup.open('center')
		},
		close:function(){
			this.$refs.popup.close()
		},
		cityChange:function(e){
			this.form.city = e.data.join(',')
		},
		radioBind:function(e){
			this.form.type = e.detail.value
		},
		postAdd:function(){
			var arr = {
				name:'收货人不能为空',
			    phone:'联系电话不能为空',
			    city:'所在城市不能为空',
			    address:'具体地址不能为空',
			}
			for(var x in arr){
				if(!this.form[x]){
					uni.showToast({
						title:arr[x],
						icon: "none", 
						position:'bottom',
					});
					return;
				}
			}
			var that = this
			this.form.uid = uni.getStorageSync('uid')
			request({
				url: 'address/add',
				method: 'post',
				data:this.form,
				success: (res) => {
					if(res.data.code == 1){
						uni.showToast({
							title:'添加成功!!',
							icon: "success", 
							position:'bottom',
						});
					}
					that.getList()
					that.$refs.popup.close()
				}
			})
		}
	}
}
</script>
<style>
.list {
    border-bottom: 1rpx solid #000;
}
.item{
	border-bottom: 1rpx solid #F2f2f2;
	height:70rpx;
	line-height: 70rpx;
	padding-left:20rpx;
}
.remark{
	margin-left:15rpx;
}
.payitem {
    width: 98%;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    padding: 20rpx;
}
.payitem view {
    width: 150rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 5rpx;
    font-size: .6rem;
    color: #FFF;
}
.checktrue {
    background: #c0c0c0;
}
.checkfalse {
    background: #3274e5;
}

.payitem view:nth-child(2) {
    background: #e64340;
    margin-right:20rpx;
}
.footer{
	position: fixed;
	height:80rpx;
	line-height:80rpx;
	bottom: 20rpx;
	left:5%;
	width:90%;
	background:#ff861a;
	position: fixed;
	z-index:20;
	color:#fff;
	border-radius: 40rpx;
	text-align: center;
}
.payclass{
	width:600rpx;
	height:700rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}
.pop_top{
	display: flex;
	height:80rpx;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.pop_top image{
	width:50rpx;
	height:50rpx;
}
.po_top_1{
	width:70%;
	font-weight: bold;
	font-size: 17px;
}
.pboutom{
	width:70%;margin-top:20px;
	height:30px;line-height:30px;
	background: #44b549;
	color:#FFFFFF;
	border-radius: 30rpx;
}
.view_input_radio1{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
	width:65%;
}
.view_input_radio1 label{
	display: flex;
	flex-direction: row;
	height:70rpx;
	line-height: 70rpx;
}
</style>